<template>
  <div class="role">
    <div class="selectedRoleBox">
      <div
        class="roleBox"
        v-for="(role, index) in selectedRoleList"
        :key="index"
      >
        <!-- 操作符 -->
        <div class="operatorBox">
          <div
            class="optionBox reduce"
            v-show="role.count != 0"
            @click="reduceFun(index)"
          >
            <div class="optionReduce" />
          </div>
          <div class="optionBox plus" @click="plusFun(index)">
            <div class="optionPlus" />
          </div>
        </div>
        <img :src="role.imgUrl" alt="图片正在赶来的路上" class="imgUrl" />
        <div class="countBox" v-show="role.count != 0">
          <div class="count">
            {{ role.count }}
          </div>
        </div>
        <div class="name">{{ role.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SelectRoleWeaponList",
  props: {
    maxCount: {
      type: Number,
      default: 10,
    },
    selectedRoleList: {
      type: Array,
      default: () => [
        {
          imgUrl:
            "https://img0.baidu.com/it/u=2866200409,4132400541&fm=253&fmt=auto&app=120&f=JPEG?w=450&h=780",
          name: "迪剑",
          count: 0,
        },
        {
          imgUrl:
            "https://img1.baidu.com/it/u=409539705,858709430&fm=26&fmt=auto",
          name: "迪剑",
          count: 0,
        },
      ],
    },
  },
  methods: {
    // 新增数量函数
    plusFun(index) {
      if (this.selectedRoleList[index].count >= this.maxCount) {
        this.$notify.info(this.selectedRoleList[index].name+"已达到最高等级！");
        return false;
      }
      this.selectedRoleList[index].count++;
    },
    // 减少数量函数
    reduceFun(index) {
      if (this.selectedRoleList[index].count <= 0) {
        return false;
      } else {
        this.selectedRoleList[index].count--;
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
// 定义单位数值
@roleUnit: 24px;

//selectedRoleBox
.selectedRoleBox {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.roleBox {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 2px 12px;

  // 操作盒子相关样式
  .operatorBox {
    position: absolute;
    width: 100%;
    height: @roleUnit;
    top: -10px;

    // 操作符相关样式
    .optionBox {
      position: absolute;
      display: inline-block;
      width: @roleUnit;
      height: @roleUnit;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.6) !important;

      // 设置通用样式
      div {
        width: 100%;
        height: 100%;
        background-color: rgb(255, 255, 255) !important;
      }

      // 减操作符相关样式
      .optionReduce {
        mask: url("../assets/reduce.svg") center center / contain no-repeat;
        -webkit-mask: url("../assets/reduce.svg") center center / contain
          no-repeat;
      }
      // 加操作符相关样式
      .optionPlus {
        right: calc(-@roleUnit / 2);
        mask: url("../assets/plus.svg") center center / contain no-repeat;
        -webkit-mask: url("../assets/plus.svg") center center / contain
          no-repeat;
      }
    }

    // 减盒子位置
    .optionBox.reduce {
      left: calc(-@roleUnit / 2);
    }
    // 加盒子位置
    .optionBox.plus {
      right: calc(-@roleUnit / 2);
    }
  }

  // 组件角色的图片
  .imgUrl {
    height: 60px;
    width: 60px;
  }

  // 计数器样式
  .countBox {
    width: 0;
    height: 0;
    border-bottom: 20px solid #087403;
    border-left: 20px solid transparent;
    bottom: 20px;
    position: absolute;
    right: 0;
    bottom: 16px;

    .count {
      width: 16px;
      height: 16px;
      padding: 2px;
      font-size: 10px;
      font-weight: bold;
      color: #ffffff;
      position: absolute;
      right: 0;
      bottom: -20px;
      text-align: right;
      font-family: "Times New Roman", Times, serif;
    }
  }

  // 组件角色的名称
  .name {
    height: 16px;
    line-height: 16px;
    width: 60px;
    font-weight: bold;
    font-size: 0.8rem;
    text-align: center;
    color: #ffffff;
    background-color: #3db39e;
  }
}
</style>
